import React from 'react';
import PropTypes from 'prop-types';
import { Button, Col, Form, Input, Row } from 'antd';
import './index.less';

const labelList = [
  { label: 'IP 地址', id: 'ip', placeholder: '请输入IP地址' },
  { label: '域名', id: 'domain', placeholder: '请输入域名' },
  { label: 'banner', id: 'banner', placeholder: '请输入banner的关键词' },
  { label: 'ssl 证书', id: 'ssl', placeholder: '请输入ssl的关键词' },
  { label: '网站标题', id: 'title', placeholder: '请输入网站标题的关键词' }
];

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};

class Index extends React.Component {
  handleReset = () => {
    const { form, onSearch } = this.props;
    form.resetFields();
    onSearch();
  };

  render() {
    const { form, onSearch } = this.props;
    return (
      <Form {...formItemLayout} layout="horizontal" className="asset-org-search">
        <Row>
          {labelList.map((item, index) => {
            const { label, id, placeholder } = item;
            return (
              <Col
                span={7}
                key={id}
                offset={index % 3 ? 1 : 0}
                className={index % 3 ? '' : 'asset-org-search-first-line'}
              >
                <Form.Item label={label} colon={false} labelAlign="left">
                  {form.getFieldDecorator(id)(<Input placeholder={placeholder} />)}
                </Form.Item>
              </Col>
            );
          })}
          <Col span={7} offset={1}>
            <div className="form-btn">
              <Button type="primary" onClick={onSearch}>
                搜索
              </Button>
              <Button onClick={this.handleReset}>重置</Button>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }
}

Index.propTypes = {
  form: PropTypes.object,
  onSearch: PropTypes.func
};

export default Form.create()(Index);
